<template>
  <div class="double-result-item" :style="isOdd?'background-color:'+(typeColor[itemData.searchType]?typeColor[itemData.searchType].backgroundColor:'#fafafa'):''">
    <template v-if="itemData.type==='more'">
      <div class="more" :style="'border-bottom: 3px solid '+typeColor[itemData.searchType].color">
        <span>在“{{ itemData.searchType }}”中查看更多搜索结果</span>
        <img src="@/assets/dashboard/right-arrow.png" alt="" width="7" height="11">
      </div>
    </template>
    <template v-else-if="itemData.type==='normal'">
      <div class="double-item">
        <div class="left-box" :style="'border-right: 1px solid '+(isOdd?typeColor[itemData.searchType].borderColor:'rgba(0,0,0,0.06)')">
          <img :src="typeImg[itemData.searchType]" alt="">
          <span :style="'color: '+typeColor[itemData.searchType].color">{{ itemData.searchType }}</span>
        </div>
        <template v-if="itemData.searchType==='审核申请'">
          <div class="right-box right-box-shenheshenqing">
            <div class="title-row">
              <img class="appImg" :src="getAppImg(itemData.appType)" alt="">
              <span class="title">{{ itemData.title }}</span>
              <div class="status" :class="'status_'+itemData.status">{{ getStatus(itemData.status) }}</div>
            </div>
            <div class="middle-row">
              申请人：{{ itemData.createUserName || '-' }}
            </div>
            <div class="footer-row">
              <span class="time">时间：{{ itemData.createTime || '-' }}</span>
              <span class="app_type">来源：{{ itemData.appType }}</span>
            </div>
          </div>
        </template>
        <template v-if="itemData.searchType==='公文通知'">
          <div class="right-box right-box-gongwentongzhi">
            <div class="title-row">
              <img class="appImg" :src="getAppImg(itemData.appType)" alt="">
              <span class="title">{{ itemData.title }}</span>
            </div>
            <div class="middle-row">
              {{ itemData.content || '-' }}
            </div>
            <div class="footer-row">
              <span class="time">时间：{{ itemData.createTime || '-' }}</span>
              <span class="app_type">来源：{{ itemData.appType }}</span>
            </div>
          </div>
        </template>
        <template v-if="itemData.searchType==='联系人'">
          <div class="right-box right-box-lianxiren">
            <div class="title-row">
              <img class="headImg" src="@/assets/dashboard/searchResult/head_3.png" alt="" v-if="itemData.isGroup" >
              <img class="headImg" src="@/assets/dashboard/searchResult/head_1.png" alt="" v-else-if="itemData.gender==='1'" >
              <img class="headImg" src="@/assets/dashboard/searchResult/head_2.png" alt="" v-else-if="itemData.gender==='2'" >
              <span class="title">{{ itemData.title }}</span>
            </div>
            <div class="middle-row">
              {{ itemData.isGroup ? itemData.member+'人' : itemData.departmentName }}
            </div>
          </div>
        </template>
        <template v-if="itemData.searchType==='会话'">
          <div class="right-box right-box-huihua">
            <div class="title-row">
              <img class="headImg" src="@/assets/dashboard/searchResult/head_3.png" alt="" v-if="itemData.isGroup" >
              <img class="headImg" src="@/assets/dashboard/searchResult/head_1.png" alt="" v-else-if="itemData.gender==='1'" >
              <img class="headImg" src="@/assets/dashboard/searchResult/head_2.png" alt="" v-else-if="itemData.gender==='2'" >
              <span class="title">{{ itemData.title }}</span>
            </div>
            <div class="middle-row">
              {{ (itemData.isGroup ? (itemData.sendUserName + '：') : '') + itemData.content }}
            </div>
            <div class="footer-row">
              <span class="time">时间：{{ itemData.createTime || '-' }}</span>
            </div>
          </div>
        </template>
        <template v-if="itemData.searchType==='文件图片'">
          <div class="right-box right-box-wenjiantupian">
            <div class="title-row">
              <img class="fileImg" src="@/assets/dashboard/searchResult/fileIcon/icon_xls.png" alt="" v-if="getFileType(itemData.title)==='xls'||getFileType(itemData.title)==='xlsx'||getFileType(itemData.title)==='csv'">
              <img class="fileImg" src="@/assets/dashboard/searchResult/fileIcon/icon_doc.png" alt="" v-else-if="getFileType(itemData.title)==='doc'||getFileType(itemData.title)==='docx'">
              <img class="fileImg" src="@/assets/dashboard/searchResult/fileIcon/icon_ppt.png" alt="" v-else-if="getFileType(itemData.title)==='ppt'||getFileType(itemData.title)==='pptx'">
              <img class="fileImg" src="@/assets/dashboard/searchResult/fileIcon/icon_pdf.png" alt="" v-else-if="getFileType(itemData.title)==='pdf'">
              <img class="fileImg" src="@/assets/dashboard/searchResult/fileIcon/icon_txt.png" alt="" v-else-if="getFileType(itemData.title)==='txt'">
              <img class="fileImg" src="@/assets/dashboard/searchResult/fileIcon/icon_jpg.png" alt="" v-else-if="getFileType(itemData.title)==='jpg'||getFileType(itemData.title)==='png'||getFileType(itemData.title)==='pdf'">
              <img class="fileImg" src="@/assets/dashboard/searchResult/fileIcon/icon_zip.png" alt="" v-else-if="getFileType(itemData.title)==='zip'||getFileType(itemData.title)==='rar'||getFileType(itemData.title)==='7z'">
              <img class="fileImg" src="@/assets/dashboard/searchResult/fileIcon/icon_other.png" alt="" v-else>
              <span class="title">{{ itemData.title }}</span>
            </div>
            <div class="middle-row">
              {{ itemData.size + 'Kb' }}
            </div>
            <div class="footer-row">
              <span class="time">时间：{{ itemData.createTime || '-' }}</span>
              <span class="source">来源：{{ itemData.source }}</span>
            </div>
            <div class="tool-btn">下载</div>
          </div>
        </template>
        <template v-if="itemData.searchType==='功能应用'">
          <div class="right-box right-box-gongnengyingyong">
            <div class="title-row">
              <img class="appImg" :src="getAppImg(itemData.appType)" alt="">
              <span class="title">{{ itemData.title }}</span>
            </div>
            <div class="middle-row">
              {{ itemData.appType || '-' }}
            </div>
            <div class="tool-btn">{{ itemData.appType==='NTalk' ? '打开应用' : '打开功能' }}</div>
          </div>
        </template>
        <template v-if="itemData.searchType==='文章'">
          <div class="right-box right-box-wenzhang">
            <div class="title-row">
              <img class="appImg" :src="getAppImg(itemData.appType)" alt="">
              <span class="title">{{ itemData.title }}</span>
            </div>
            <div class="middle-row">
              {{ itemData.content || '-' }}
            </div>
            <div class="footer-row">
              <span class="time">时间：{{ itemData.createTime || '-' }}</span>
              <span class="app_type">来源：{{ itemData.appType }}</span>
            </div>
          </div>
        </template>
        <template v-if="itemData.searchType==='自助机'">
          <div class="right-box right-box-zizhuji">
            <div class="title-row">
              <img class="appImg" :src="getAppImg(itemData.appType)" alt="">
              <span class="user">{{ itemData.sendUserName || '-' }}</span>
              <img class="divider" src="@/assets/dashboard/searchResult/progressRight.png" alt="">
              <span class="user">{{ itemData.getUserName || '-' }}</span>
            </div>
            <div class="middle-row">
              <span class="phone" style="margin-left: 18px;">{{ itemData.sendUserPhone || '-' }}</span>
              <span class="phone" style="margin-left: 16px;">{{ itemData.getUserPhone || '-' }}</span>
            </div>
            <div class="footer-row">
              <span class="billNo">承运单号：{{ itemData.billNo || '-' }}</span>
              <span class="createTime">开单时间：{{ itemData.createTime || '-' }}</span>
            </div>
          </div>
        </template>
        <template v-if="itemData.searchType==='G3平台'">
          <div class="right-box right-box-g3pingtai">
            <div class="title-row">
              <img class="appImg" :src="getAppImg(itemData.appType)" alt="">
              <span class="title">{{ itemData.title }}</span>
              <div class="status" :class="'status_'+itemData.status">{{ itemData.status==='1' ? '正常' : '异常' }}</div>
            </div>
            <div class="footer-row">
              <span class="customerCode">客户编号：{{ itemData.customerCode || '-' }}</span>
              <span class="contact">联系人：{{ itemData.contact }} {{ itemData.phone }}</span>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import { allAppList } from "@/components/workApp/components/appList";
import g3pingtai from '@/assets/dashboard/searchResult/searchType/g3pingtai.png'
import gongnengyingyong from '@/assets/dashboard/searchResult/searchType/gongnengyingyong.png'
import gongwentongzhi from '@/assets/dashboard/searchResult/searchType/gongwentongzhi.png'
import huihua from '@/assets/dashboard/searchResult/searchType/huihua.png'
import lianxiren from '@/assets/dashboard/searchResult/searchType/lianxiren.png'
import shenheshenqing from '@/assets/dashboard/searchResult/searchType/shenheshenqing.png'
import wenjiantupian from '@/assets/dashboard/searchResult/searchType/wenjiantupian.png'
import wenzhang from '@/assets/dashboard/searchResult/searchType/wenzhang.png'
import zizhuji from '@/assets/dashboard/searchResult/searchType/zizhuji.png'
export default {
  components: {
  },
  name: "",
  props: {
    itemData: {
      type: Object,
      default: {},
    },
    isOdd: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      typeImg: {
        'G3平台': g3pingtai,
        '功能应用': gongnengyingyong,
        '公文通知': gongwentongzhi,
        '会话': huihua,
        '联系人': lianxiren,
        '审核申请': shenheshenqing,
        '文件图片': wenjiantupian,
        '文章': wenzhang,
        '自助机': zizhuji,
      },
      typeColor: {
        'G3平台': { backgroundColor: '#f5f5ff', color: '#6c6cea', borderColor: '#d9d9ff' },
        '功能应用': { backgroundColor: '#fcfbf0', color: '#ffc919', borderColor: '#f2efce' },
        '公文通知': { backgroundColor: '#fff7f7', color: '#f23d4f', borderColor: '#ffd9d9' },
        '会话': { backgroundColor: '#f5fbff', color: '#2595e8', borderColor: '#d9f0ff' },
        '联系人': { backgroundColor: '#f5f5ff', color: '#6c6cea', borderColor: '#d9d9ff' },
        '审核申请': { backgroundColor: '#fff9f5', color: '#e67529', borderColor: '#ffe8d9' },
        '文件图片': { backgroundColor: '#f2fcf9', color: '#05c46d', borderColor: '#cef2e7' },
        '文章': { backgroundColor: '#fff9f5', color: '#e67529', borderColor: '#ffe8d9' },
        '自助机': { backgroundColor: '#fff7f7', color: '#f23d4f', borderColor: '#ffd9d9' },
      },
      statusList: [
        { label: '未处理', value: '0' },
        { label: '审核中', value: '1' },
        { label: '已处理', value: '2' },
        { label: '已同意', value: '3' },
      ],
    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    //返回应用图片
    getAppImg(appName) {
      let res = allAppList.find(item=>{
        return item.text === appName
      })
      return res ? res.img : ''
    },
    //切换类别搜索
    researchType(){
      this.$emit('researchType',this.typeName)
    },
    //返回审核状态
    getStatus(val){
      let res = this.statusList.find(item=>{
        return item.value === val
      })
      return res ? res.label : '未知状态'
    },
    //获取文件类型
    getFileType(fileName) {
      if(!fileName || typeof(fileName) !== 'string'){
        return ''
      }
      return fileName.split('.').pop()
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.double-result-item {
  width: 100%;
  height: 82px;
  box-sizing: border-box;
  background-color: #fafafa;
  margin-bottom: 12px;
  &:last-child {
    margin-bottom: 16px;
  }
  .more {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      color: rgba(0,0,0,0.66);
      font-size: 14px;
      padding-right: 12px;
      cursor: pointer;
    }
    img {
      cursor: pointer;
    }
  }
  .double-item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 8px 0;
    display: flex;
    .left-box {
      width: 72px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 20px;
        height: 20px;
      }
      span {
        margin-top: 4px;
        font-size: 12px;
      }
    }
    .right-box {
      width: calc(100% - 72px);
      height: 100%;
      box-sizing: border-box;
      padding-left: 12px;
      overflow: hidden;

      &.right-box-shenheshenqing {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .appImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
          }
          .title {
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
          }
          .status {
            box-sizing: border-box;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: 1px solid;
            margin-left: 8px;
            padding: 0 8px;
            &.status_0 {
              border-color: #ffd591;
              background-color: #fff7e6;
              color: #fa8c16;
            }
            &.status_1 {
              border-color: #91caff;
              background-color: #e6f4ff;
              color: #1677ff;
            }
            &.status_2 {
              border-color: #b7eb8f;
              background-color: #f6ffed;
              color: #52c41a;
            }
            &.status_3 {
              border-color: #b7eb8f;
              background-color: #f6ffed;
              color: #52c41a;
            }
          }
        }
        .middle-row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
        }
        .footer-row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          white-space: nowrap;
          .time {
            width: 170px;
          }
        }
      }

      &.right-box-gongwentongzhi {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .appImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
          }
          .title {
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
            width: calc(100% - 38px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .middle-row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
          box-sizing: border-box;
          padding-right: 12px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .footer-row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          white-space: nowrap;
          .time {
            width: 170px;
          }
        }
      }

      &.right-box-lianxiren {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          margin-top: 12px;
          .headImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
          }
          .title {
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
          }
        }
        .middle-row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
        }
      }

      &.right-box-huihua {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .headImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
          }
          .title {
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
          }
        }
        .middle-row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
          box-sizing: border-box;
          padding-right: 12px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .footer-row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          white-space: nowrap;
          .time {
            width: 170px;
          }
        }
      }

      &.right-box-wenjiantupian {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .fileImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
          }
          .title {
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
            width: calc(100% - 38px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .middle-row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
          box-sizing: border-box;
          padding-right: 12px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .footer-row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          white-space: nowrap;
          .time {
            width: 170px;
            flex-shrink: 0;
          }
        }
        position: relative;
        .tool-btn {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          border-radius: 4px;
          font-size: 14px;
          border: 1px solid #f2f3f6;
          box-sizing: border-box;
          cursor: pointer;
          height: 24px;
          width: 44px;
        }
      }

      &.right-box-gongnengyingyong {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          margin-top: 12px;
          .appImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
          }
          .title {
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
          }
        }
        .middle-row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
        }
        position: relative;
        .tool-btn {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          border-radius: 4px;
          font-size: 14px;
          border: 1px solid #f2f3f6;
          box-sizing: border-box;
          cursor: pointer;
          height: 24px;
          width: 72px;
        }
      }

      &.right-box-wenzhang {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .appImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
          }
          .title {
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
            width: calc(100% - 38px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .middle-row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
          box-sizing: border-box;
          padding-right: 12px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .footer-row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          white-space: nowrap;
          .time {
            width: 170px;
          }
        }
      }

      &.right-box-zizhuji {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .appImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            transform: translateY(6px);
          }
          .user {
            font-size: 14px;
            color: @textColor;
            width: 110px;
            text-align: center;
            flex-shrink: 0;
          }
          .divider {
            width: 16px;
            height: 16px;
            transform: translateY(6px);
          }
        }
        .middle-row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: @textColor;
          display: flex;
          align-items: center;
          .phone {
            width: 110px;
            text-align: center;
            flex-shrink: 0;
          }
        }
        .footer-row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          .billNo {
            width: 150px;
            flex-shrink: 0;
          }
          .createTime {
            white-space: nowrap;
          }
        }
      }

      &.right-box-g3pingtai {
        .title-row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          margin-top: 12px;
          .appImg {
            width: 18px;
            height: 18px;
            border-radius: 4px;
          }
          .title {
            font-size: 14px;
            color: @textColor;
            margin-left: 8px;
          }
          .status {
            box-sizing: border-box;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: 1px solid;
            margin-left: 8px;
            padding: 0 8px;
            &.status_0 {
              border-color: #ffd591;
              background-color: #fff7e6;
              color: #fa8c16;
            }
            &.status_1 {
              border-color: #91caff;
              background-color: #e6f4ff;
              color: #1677ff;
            }
            &.status_2 {
              border-color: #b7eb8f;
              background-color: #f6ffed;
              color: #52c41a;
            }
            &.status_3 {
              border-color: #b7eb8f;
              background-color: #f6ffed;
              color: #52c41a;
            }
          }
        }
        .footer-row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          .customerCode {
            width: 150px;
            flex-shrink: 0;
          }
          .contact {
            white-space: nowrap;
          }
        }
      }

    }
  }
}
</style>
